<template>
  <div class="parent">
    <h3>parent----</h3>
    <h4>父级变量 car: <input type="text" v-model="car" /></h4>
    <h4>子组件-Son传递过来的值-按属性 : {{ carName }}</h4>
    <h4>子组件-Son传递过来的值-按事件 : {{ carNameEmit }}</h4>
    <!-- <Son :car="car" :send-name="getCarName" ></Son>  通过属性传值-->
    <Son :car="car" :send-name="getCarName" @send-carName="getCarNameEmit"></Son>
    <!-- 通过事件传值 -->
    <Girl :car="car"></Girl>
  </div>
</template>

<script setup lang="ts">
import Son from './Son.vue'
import Girl from './Girl.vue'
import { ref } from 'vue'

let car = ref('劳斯莱斯')
let carName = ref('')
let carNameEmit = ref('')

let getCarName = (value: string) => {
  console.log('getCarName', value)
  carName.value = value
}

let getCarNameEmit = (value: string) => {
  console.log('getCarNameEmit', value)
  carNameEmit.value = value
}
</script>

<style scoped>
.parent {
  background-color: #ccc;
  height: 500px;
}
</style>